<template>
  <div class="page-tabbar">
    <ul class="nav navbar-nav flex-row">
      <li class="flex-grow-1 flex-y-center flex-x-center" v-for="(item,index) in navs">
        <a class="flex-grow-1" :href="toUrlList[index]" :class="{'active':activeIndex==index}">
          <span class="barIcon">
            <img v-if="activeIndex==index" :src="item.chooseIcon" alt="">
            <img v-else="" :src="item.icon" alt="">
          </span>
          {{item.name}}
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
  let yu_ming = window.location.origin
  import {GETTABBAR} from 'src/const/shareUri'
  import {setStore, getStore} from "src/assets/js/md-utils";

  export default {
    props: {
      activeIndex: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        navs:[],
        toUrlList:[`${yu_ming}/wx/index.html`,`${yu_ming}/wx/fenlei.html`,`${yu_ming}/wx/brand.html`,`${yu_ming}/wx/zetianshuo.html`,`${yu_ming}/wx/my.html`]
      }
    },
    beforeCreate(){
      this.navs=JSON.parse(getStore('navs'));
    },
    created() {
      this.$ajax.get(GETTABBAR, {}, (res) => {
        this.navs = res.data.navs;
        setStore('navs',res.data.navs)
      });
    },
    methods: {}
  }

</script>
<style lang="less" scoped>
  .page-tabbar {
    width: 100%;
    .nav {
      width: 100%;
      &.navbar-nav {
        bottom: 0;
        left: 0;
        position: fixed;
        z-index: 20;
        height: 49px;
        background: #fff;
        &:after{
          content: " ";
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          height: 1px;
          border-top: 1px solid #d5d4d4;
          color: #d5d4d4;
          transform-origin: 0 0;
          transform: scaleY(0.5);
        }
        li {
          a {
            display: block;
            color: #404040;
            font-size: 10px;
            padding-top: 3px;
            height: 46px;
            text-align: center;
            &.active {
              color: @red;
            }
            .barIcon {
              display: block;
              margin: 1px auto;
              width: 24px;
              height: 24px;
              background: no-repeat center center;
              background-size: cover;
              //  background-position:center center;
            }
          }
        }
      }
    }
  }
</style>

